import { FC } from "react";
import { Button, Tag, Popconfirm, Modal } from "antd";
import {
  EditOutlined,
  LineChartOutlined,
  StarOutlined,
  CopyOutlined,
  DeleteOutlined,
} from "@ant-design/icons";
import { useNavigate, Link } from "react-router-dom";

const { confirm } = Modal;

interface IInfo {
  _id: string;
  title: string;
  isPublished: boolean;
  isStar: boolean;
  answerCount: number;
  createdAt: string;
  delQuestion?: (id: string) => void;
  pubQuestion?: (id: string) => void;
}
const QuestionCard: FC<IInfo> = props => {
  const nav = useNavigate();
  const { _id, title, isPublished, isStar, answerCount, createdAt } = props;
  // const { _id, title, isPublished, isStar, answerCount, createdAt, delQuestion, pubQuestion } =
  //   props;

  // function pub(id: string) {
  //   pubQuestion && pubQuestion(id);
  // }

  // function del(id: string) {
  //   delQuestion && delQuestion(id);
  // }

  function duplicate() {
    console.log("复制");
  }

  function del() {
    confirm({
      title: "提示",
      content: "是否删除问卷",
      icon: <StarOutlined />,
      onOk() {
        console.log("删除");
      },
    });
  }

  return (
    <div className="mb-4 px-2  bg-white shadow-sm box-border">
      <div className="flex justify-between py-3 items-center ">
        <div className="text-blue-400 text-sm">
          <Link to={isPublished ? "/question/stat/" + _id : "/question/edit/" + _id}>
            {isStar && <StarOutlined className="text-red-700 mr-2"></StarOutlined>}
            <span className="text-blue-500">{title}</span>
          </Link>
        </div>
        <div className="flex text-sm">
          {isPublished ? <Tag color="green">已发布</Tag> : <Tag>未发布</Tag>}
          <span className="mr-1">答卷：{answerCount}</span>
          <span>{createdAt}</span>
        </div>
      </div>
      <div className="h-12 flex items-center justify-between px-2 mx-2 border-t-1">
        <div className="text-sm">
          <Button
            type="text"
            className="mr-2"
            size="small"
            onClick={() => nav(`/question/edit/${_id}`)}
            icon={<EditOutlined />}
          >
            编辑问卷
          </Button>
          <Button
            type="text"
            disabled={!isPublished}
            size="small"
            onClick={() => nav(`/question/stat/${_id}`)}
            icon={<LineChartOutlined />}
          >
            数据统计
          </Button>
        </div>
        <div className="flex  text-sm">
          <Button
            type="text"
            className="mr-2"
            size="small"
            icon={<StarOutlined className="text-gray-500" />}
          >
            <span className="text-gray-500"> {isStar ? "取消标星" : "标星"}</span>
          </Button>
          <Popconfirm
            title="提示"
            description="是否复制问卷"
            okText="确定"
            cancelText="取消"
            onConfirm={duplicate}
          >
            <Button
              type="text"
              className="mr-2"
              size="small"
              icon={<CopyOutlined className="text-gray-500" />}
            >
              <span className="text-gray-500">复制</span>
            </Button>
          </Popconfirm>
          <Button
            type="text"
            size="small"
            icon={<DeleteOutlined className="text-gray-500" />}
            onClick={del}
          >
            <span className="text-gray-500">删除</span>
          </Button>
        </div>
      </div>
    </div>
  );
};

export default QuestionCard;
